<template>
  <div class="content">
    <title-header title-name="数据看板"/>
    <div class="total">
      <div class="total_item">
        <span>累计总糖果数量</span>
        <span>{{ totalProcessing(total.sugar_num) || 0 }}万</span>
      </div>
      <div class="line">|</div>
      <div class="total_item">
        <span>总开奖次数</span>
        <span>{{ totalProcessing(total.start_num) || 0 }}万</span>
      </div>
      <div class="line">|</div>
      <div class="total_item">
        <span>用户参与总人数</span>
        <span>{{ total.user_num || 0 }}</span>
      </div>
    </div>
    <div class="echarts">
      <line-chart :line-data="first_sugar_num" :show-date="show_date"
                  :title="title.first" class="echarts_one"
      />
      <pieChart :quantity="pieData" class="echarts_one"/>
      <line-chart :line-data="second_sugar_num" :show-date="show_date"
                  :title="title.second" class="echarts_one"
      />
      <line-chart :line-data="third_sugar_num" :show-date="show_date"
                  :title="title.third" class="echarts_one"
      />
    </div>
  </div>
</template>

<script>
import titleHeader from '../grabCandyConfig/childComps/titleHeader'
import lineChart from './childComps/lineChart/lineChart'
import pieChart from './childComps/pieChart/pieChart'
import { dataKanbanList } from '@/api/gradCandy/gradCandy'

export default {
  name: 'dataKanban',
  components: {
    titleHeader, lineChart, pieChart
  },
  data() {
    return {
      // echart 的标题
      title: {},
      // echart 数据
      first_sugar_num: [],
      second_sugar_num: [],
      third_sugar_num: [],
      show_date: [],
      total_sugar_num: [],
      pieData: [],
      chart: [],
      total: {}
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    // 网络请求
    /**
     * getDataList
     * @desc 获取数据看板所有数据
     */
    async getDataList() {
      const detail = await dataKanbanList()
      if (detail.code === 200) {
        this.chart = detail.data.chart
        // 处理 chart 数据
        this.chart.map(item => {
          for (const itemKey in item) {
            if (this[itemKey]) {
              this[itemKey].unshift(item[itemKey])
            }
          }
        })
        // 饼图数据
        this.pieData = [{
          name: '盟主赛',
          value: this.third_sugar_num[this.third_sugar_num.length - 1]
        }, {
          name: '大侠赛',
          value: this.second_sugar_num[this.second_sugar_num.length - 1]
        }, {
          name: '新秀赛',
          value: this.first_sugar_num[this.first_sugar_num.length - 1]
        }]
        this.title = detail.data.title
        this.total = detail.data.total
      }
    },
    /**
     * totalProcessing
     * @desc 处理总数数据
     */
    totalProcessing(number) {
      return (parseInt(number) / 10000).toFixed(1)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "index";
</style>
